<template>
    <div class="selectProductsDetail">
        <div class="selectProducts_back">
            <div class="bg-white-height"></div>
            <div class="van-nav-bar">
                <div class="title">已选品</div>
                <van-icon name="arrow-left" class="left_img" @click="handleLeft" />
            </div>
        </div>
        <div class="header">
            <div class="title">选品详情</div>
            <div class="content">
                <div class="content_item">
                    <div class="label">选品部门：</div>
                    <div class="value">{{ datas.coreName }}</div>
                </div>
                <div class="content_item">
                    <div class="label">选品时间：</div>
                    <div class="value">{{ datas.selectionTime }}</div>
                </div>
                <div class="content_item">
                    <div class="label">选品总数：</div>
                    <div class="value" style="color: #0094FF;">{{ datas.selectionNum }}</div>
                </div>
                <div class="content_item">
                    <div class="label">选品留言：</div>
                    <div class="value">{{ datas.postscript }}</div>
                </div>
            </div>
        </div>
        <div class="contentList">
            <van-loading vertical color="#0094ff" text-color="#0094ff" v-if="list.length == 0">加载中..</van-loading>
            <van-swipe-cell v-else v-for="item in list" :key="item.id">
                <commodityList :data="item" :type="route.query.type" :switchIndex="switchIndex"
                    @setShowTops="setShowTops" />
            </van-swipe-cell>
        </div>
        <div class="bottom" v-if="switchIndex === '0'">
            <div class="selectAll" @click="selectAll">{{ !selectAllFlag ? '全选' : '取消全选' }}</div>
            <div class="approval" @click="submit">
                <template v-if="loading">
                    <van-loading type="spinner" size="24px" color="#fff"> 执行中...</van-loading>
                </template>
                <template v-else>
                    批量送审
                </template>
            </div>
        </div>
        <van-action-sheet title="选品主播" v-model:show="categoryShow" :actions="categoryList" @select="onSelectCategory" />
        <!-- 点击多人选 -->
        <van-popup v-model:show="showTops" position="bottom" closeable round>
            <div class="launch_div">
                <div class="launch_div_title">选品种类</div>
                <div class="launch_div_item" v-for="item in showTopsData" :key="item.pid">{{ item.selectionCoreName }}
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
import { getSelectedById, batchQuantity, requestThirdInvent } from '@/api/approval/index'
import { getSystemList } from '@/api/approval/index'
import { computed, onMounted, ref } from 'vue';
import { getEnvValue } from "@/utils/index";
import commodityList from './components/commodityList.vue'
import { useRoute, useRouter } from 'vue-router';
import { getInfo } from "@/api/supplierList/index";
import { showFailToast, showSuccessToast } from 'vant';

const router = useRouter();
const route = useRoute();
const list = ref<any>([])
const selectAllFlag = ref(false)
const categoryShow = ref(false)
const categoryList = ref<any>([])
const showTops = ref(false)
const showTopsData = ref<any>([])
const deptName = ref('')
const loading = ref(false)
const categoryMap = {
    '鞋帽部': '1',
    '酒茶部': '2',
    '箱包部': '3',
    '百货部': '4',
    '服装部': '5',
    '食品部': '6'
}

/** id */
const id = computed(() => {
    return route.query.id;
});
/** 商品详情 */
const datas: any = computed(() => {
    return JSON.parse(route.query.datas as any);
});
/** 商品详情 */
const switchIndex: any = computed(() => {
    return route.query.switchIndex;
});
/** 回退 */
const handleLeft = () => {
    router.back();
}
/** 获取列表 */
const getList = async () => {
    const res = await getSelectedById({ id: id.value, type: route.query.type })
    res.rows.forEach((item) => {
        item.checked = []
        if (item.productImage) {
            item.productImages = getEnvValue("VITE_APP_PIC_URL") + item.productImage.split(',')[0];
        } else {
            item.productImages = "";
        }
    });
    list.value = res.rows
}
onMounted(() => {
    getList()
})
/** 全选 */
const selectAll = () => {
    selectAllFlag.value = !selectAllFlag.value
    list.value.forEach((item) => {
        if (item.auditStatus === '6' || item.auditStatus === '-5') {
            if (selectAllFlag.value) {
                item.checked = ['code']
            } else {
                item.checked = []
            }
        }
    })
}
/** 批量送审 */
const submit = async () => {
    loading.value = true

    try {

        const response = await getInfo()
        loading.value = false
        deptName.value = response.data.user.dept.deptName
        const filterList: any = list.value.filter((item) => item.checked.length > 0)
        const arr: any = []
        filterList.forEach((item: any) => {
            arr.push(item.id)
        })
        if (filterList.length > 0) {
            if (deptName.value == '惠麦优选' || route.query.type == '1') {
                categoryShow.value = true
            } else {
                loading.value = true
                let params = {
                    productIds: arr,
                    coreId: datas?.value.coreUserId,
                    id: datas?.value.selectionId
                }
                // 商品初审
                getEditSevens(params)
            }
        } else {
            showFailToast('请选择商品')
        }
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('送审失败');
        }
        loading.value = false
    }
}
const getEditSevens = async (params) => {
    try {
        if (route.query.type == '0') {

            await batchQuantity({ ...params, liveType: list.value[0].liveType })
        } else {
            await requestThirdInvent({ ...params, liveType: list.value[0].liveType })
        }
        loading.value = false
        showSuccessToast({ type: "success", message: "商品送审成功" });
        handleLeft()
    } catch (e) {
        loading.value = false
        handleLeft()
    }
}
/** 获取部门列表 */
const getcategoryColumns = async () => {
    const res = await getSystemList({ parentId: '1796913597400784898' })
    if (res.data.length) {
        // 去掉惠麦优选部门
        const response = res.data.filter(item => item.deptName !== '惠麦优选')
        response.forEach(item => {
            item.name = item.deptName
            Object.keys(categoryMap).forEach(key => {
                if (item.deptName.includes(key)) {
                    item.value = categoryMap[key];
                    return;
                }
            });
        })
        categoryList.value = response
    }
}
getcategoryColumns()
/** 部门选择事件 */
const onSelectCategory = (selection) => {
    categoryShow.value = false;
    const filterList: any = list.value.filter((item) => item.checked.length > 0)
    const arr: any = []
    filterList.forEach((item: any) => {
        arr.push(item.id)
    })
    loading.value = true
    let params = {
        productIds: arr,
        coreId: datas?.value.coreUserId,
        id: datas?.value.selectionId,
        productType: selection.value
    }
    getEditSevens(params)
}
const setShowTops = (data: any) => {
    showTops.value = true
    showTopsData.value = data
}
</script>
<style lang="less" scoped>
* {
    box-sizing: border-box;
}

.selectProductsDetail {
    height: 100vh;
    width: 100%;
    background: #F6FAFF;
    overflow: hidden;
    display: flex;
    flex-flow: column;

    .selectProducts_back {
        width: 100%;
        height: 90px;
        background: linear-gradient(#CDECFF 0%, #ffffff 100%);
        filter: blur(0px);

        .bg-white-height {
            height: 44px;
            width: 100%;
        }

        .van-nav-bar {
            height: 46px;
            width: 100%;
            background-color: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            .title {
                font-size: 4.266667vw;
                color: #1a1b1c;
            }

            .left_img {
                position: absolute;
                left: 15px;
                color: #000;
            }
        }
    }

    .header {
        width: 345px;
        height: auto;
        margin: 10px 15px;
        background-color: #fff;

        .title {
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
            width: 100%;
            height: 38px;
            background: linear-gradient(270deg, #FFFFFF 0%, #EBF4FF 100%);
            border-radius: 5px 5px 0px 0px;
            text-align: left;
            line-height: 38px;
            padding-left: 15px;
        }

        .content {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 15px 15px 0 15px;

            .content_item {
                width: 100%;
                display: flex;
                align-items: self-start;
                justify-content: space-between;
                margin-bottom: 15px;

                .label {
                    width: 70px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                }

                .value {
                    flex: 1;
                    min-width: 0;
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    word-break: break-all;
                }
            }
        }
    }

    .contentList {
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        background-color: #fff;
        padding: 20px 0;
        overflow: auto;

        .contentList_item {
            width: 100%;
            height: 157px;
            margin-bottom: 15px;
        }
    }

    .bottom {
        width: 375px;
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .selectAll {
            width: 112px;
            height: 44px;
            border-radius: 23px;
            border: 1px solid #5FBBFF;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 16px;
            color: #0094FF;
        }

        .approval {
            width: 218px;
            height: 44px;
            background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}

.launch_div {
    padding: 20px 10px 0;
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    background: #fff;

    .launch_div_title {
        width: 100%;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
        margin-bottom: 30px;
    }

    .launch_div_item {
        width: 100%;
        height: 44px;
        border-radius: 5px;
        font-weight: 400;
        font-size: 14px;
        color: #8492AD;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>